<style type="text/css">
    .jiajian {
        border: solid 1px #e6e6e6;
        border-radius: 4px;
        width: 162px;
        overflow: hidden;
        text-align: center;
        line-height: 30px;
        margin: 0 auto;
        margin-top: 10px;
    }

    .jiajian .jia {
        display: block;
        text-align: center;
        width: 40px;
        float: right;
        cursor: pointer;
    }

    .jiajian .jian {
        display: block;
        text-align: center;
        width: 40px;
        float: left;
        cursor: pointer;
    }

    .jiajian input {
        width: 80px;
        float: left;
        line-height: 30px;
        height: 30px;
        border: none;
        border-right-color: currentcolor;
        border-right-style: none;
        border-right-width: medium;
        border-left-color: currentcolor;
        border-left-style: none;
        border-left-width: medium;
        text-align: center;
        border-left: 1px solid #dcdcdc;
        border-right: 1px solid #dcdcdc;
    }

    .layui-row .layui-col-md2 {
        min-width: 260px;
    }

    .footBtn123 {
        height: 50px !important;
        line-height: 50px;
        margin-bottom: 1px;
        text-align: center;
        cursor: pointer;
        font-size: 30px;
        background-color: #f10214;
        color: #fff;
        border-radius: 2px;
        opacity: .95;
        position: fixed;
        right: 50px;
        bottom: 100px;
        z-index: 9999;
    }

    .footBtn123 i {
        font-size: 50px;
    }
</style>
<div class="layui-card">
    <div class="layui-card-header">
        <h2 class="header-title">产品销售</h2>
        <span class="layui-breadcrumb pull-right"> <a
                href="#!home_console">首页</a> <a><cite>产品销售</cite></a>
		</span>
    </div>

    <div class="layui-card-body">
        <button class="layui-btn footBtn123">
            <i class="layui-icon">&#xe657;</i>
        </button>
        <div class="layui-fluid layadmin-cmdlist-fluid">
            <div class="layui-row layui-col-space30">
                <% for(stock in stocks) { %>

                <div class="layui-col-md3 layui-col-sm6">
                    <div class="cmdlist-container">
                        <a href="javascript:;"> <img src="${stock.product.productPic}">
                        </a>
                        <div class="cmdlist-text">
                            <p class="info">名称：${stock.product.productName}</p>
                            <p class="info">数量：${stock.productAmount}</p>

                            <div class="jiajian">
								<span disabled="disabled" class="jian layui-disabled"
                                      onclick="amountReduce(this)">-</span> <input class="buyNum" stockId="${stock.id}"
                                                                                   name="${stock.product.productName}"
                                                                                   price="${stock.product.productPrice}"
                                                                                   id="${stock.product.id}" initial="1"
                                                                                   onchange="checkInitial(this);"
                                                                                   oninput="value=value.replace(/[^\d]/g,'')"
                                                                                   type="text"
                                                                                   value="0"> <span class="jia"
                                                                                                    onclick="amountAdd(this)">+</span>
                                <div></div>
                            </div>
                        </div>

                    </div>
                </div>
                <% } %>

            </div>
        </div>
        <div id="asdsa123" class="layui-hide">
            <div class="layui-col-md12">
                <div class="layui-card">
                    <div class="layui-card-body" style="height: 400px;overflow: scroll;">
                        <table class="layui-table">
                            <colgroup>
                                <col>
                                <col>
                                <col>
                                <col>
                            </colgroup>
                            <thead>
                            <tr>
                                <th>产品名称</th>
                                <!--<th>产品单价（元）</th>-->
                                <th>销售件数</th>
                                <!--<th>总价（元）</th>-->
                            </tr>
                            </thead>
                            <tbody id="orderList1">
                            </tbody>

                        </table>
                    </div>
                    <div style="widh: 100%; text-align: center">
                        <button id="sale" class="layui-btn layui-btn-lg" style="margin: 20px 0; background: #1E9FFF">
                            销售
                        </button>

                    </div>

                </div>
            </div>
        </div>

        <link rel="stylesheet" href="${ctxPath }/assets/css/template.css"/>

        <script>
            function amountAdd(dom) {
                //var kucun = parseFloat($(dom).prev().attr("kucun"));
                var initial = parseFloat($(dom).prev().attr("initial"));
                var parent = parseFloat($(dom).prev().val());
                if (parent == 0) {
                    $(dom).prev().prev().attr("disabled", false).removeClass(
                        "layui-disabled");
                }
                parent = parent + initial;
                /* 				if (parent > kucun) {
                                    layer.msg('超出库存数量！')
                                    return;
                                } */
                $(dom).prev().val(parent);
            }

            function amountReduce(dom) {
                var parent = parseFloat($(dom).next().val());
                var initial = parseFloat($(dom).next().attr("initial"));
                parent = parent - initial;
                if (parent < 0) {
                    $(dom).attr("disabled", true).addClass("layui-disabled");
                    return;
                }
                $(dom).next().val(parent);
            }

            function checkInitial(dom) {
                var value = parseFloat($(dom).val());
                if (isNaN(value)) {
					layer.msg('输入数量有误，请查看商品数量！')
					$(dom).val(0);
				}else{
					$(dom).prev().attr("disabled", false).removeClass(
					"layui-disabled");
				}
                //var kucun = parseFloat($(dom).attr("kucun"));
                /* var initial = parseFloat($(dom).attr("initial"));
                if (value % initial != 0) {
                    layer.msg('输入数量有误，请输入起购数量的整数倍！')
                    $(dom).val(0);
                } */
                /* if (value > kucun) {
                    layer.msg('超出库存数量，请重新输入！')
                    $(dom).val(0);
                } */
            }


            layui.use(['admin', 'laypage', 'layer', 'util'], function () {
                var $ = layui.$, admin = layui.admin, laypage = layui.laypage, layer = layui.layer, util = layui.util;
                var data_list = new Array();
                // 添加按钮点击事件
                $('.footBtn123').click(function () {
                    $("#orderList1").empty();
                    data_list = new Array();
                    var data = document.getElementsByClassName("buyNum");
                    var totalNum = 0;
                    // var totalPrice = 0;
                    for (var i = 0; i < data.length; i++) {
                        if ($(data[i]).val() > 0) {

                            var m = {
                                'productId': $(data[i]).attr("id"),
                                'quantity': $(data[i]).val(),
                                'stockId': $(data[i]).attr("stockId")
                            };
                            data_list.push(m);
                            // var itemPrice = parseFloat($(data[i]).attr("price")) * parseFloat($(data[i]).val());
                            totalNum += parseFloat($(data[i]).val());
                            // totalPrice += itemPrice;
                            $("#orderList1").append(
                                "<tr> <td>" + $(data[i]).attr("name") + "</td>"
                                // + "<td>" + $(data[i]).attr("price")+ "</td>"
                                + "<td>" + $(data[i]).val() + "</td>"
                                // + "<td>" + itemPrice + "</td>"
                                + "</tr>");

                        }
                    }
                    if (totalNum == 0) {
                        $("#orderList1").empty();
                        $("#orderList1").append("<tr> <td colspan='4' style='text-align:center'>订单暂无数据！</td></tr>");
                        $(".layui-btn-lg").hide();
                    } else {
                        $("#orderList1").append(
                            "<tr> <td style='text-align:center'>合计</td><td>"
                            + totalNum + "</td>"
                            // + "<td>" + totalPrice + "</td>"
                            + "</tr>");
                        $(".layui-btn-lg").show();
                    }

                    active.test15();

                });
                //下单
                $(document).on('click', '#makeOrder', function () {
                    layer.closeAll('loading');
                    //没起作用
                    $("#makeOrder").attr('disabled', true);
                    var url = 'service/purchase/order';
                    var data = {"orderList": data_list};
                    admin.req(url, data, function (data) {
                        layer.closeAll('loading');
                        if (data.code == 1) {
                            layer.msg(data.msg, {
                                icon: 1
                            });
                        } else {
                            layer.msg(data.msg, {
                                icon: 2
                            });
                        }
                        setTimeout(function () {
                            location.reload();
                        }, 2000);
                    }, "post");
                });
                //触发事件
                var active = {
                    test15: function () {
                        layer.open({
                            title: '销售清单',
                            type: 1,
                            area: '60%',
                            offset: '20%',
                            skin: 'layui-layer-rim',
                            content: $("#asdsa123").prop(
                                "innerHTML")
                        });
                    }
                };

                //产品销售
                $(document).on('click', '#sale', function () {
                    var data = data_list;
                    showSaleModel(data);
                });

                // 显示表单弹窗
                var showSaleModel = function (data) {
                    var shopId = $("#shopInfo").attr("data");
                    admin.popupCenter({
                        area: '35%',
                        title: "产品销售",
                        path: "service/productSale/sale?shopId=" + shopId + "&orderList=" + JSON.stringify(data),
                        finish: function () {
                            location.reload();
                        }
                    });
                };

            });
        </script>